<template>
  <div class="flex justify-between" style="width: 100%">
    <h1 style="font-size: 1.25rem; margin-bottom: 1.25rem">
      {{ $t("USDM兑换记录") }}
    </h1>
  </div>

  <el-card>
    <div>
      <el-input
        v-model="filterForm.order_no"
        style="max-width: 30%;"
        :placeholder="$t('订单号搜索')" clearable
        @change="filterList()"
      ></el-input>
      <el-select v-model="filterForm.currency" :placeholder="$t('币种')" @change="filterList()" clearable style="padding: 0 0.5rem">
          <el-option v-for="item in currencyList" :key="item.key" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select
        v-model="filterForm.status"
        style="max-width: 20%; padding-right: 0.5rem"
        :placeholder="$t('订单状态')"
        clearable
        @change="filterList()"
      >
        <el-option
          v-for="item in orderStatus"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        ></el-option>
      </el-select>
      <el-button type="primary" :icon="Search" @click="onSubmit">{{$t('查询')}}</el-button>
    </div>

    <el-table :data="orderList" v-loading="loading" style="margin-top: 1.25rem">
      <el-table-column prop="order_no" :label="$t('订单号')" />
      <el-table-column align="center" :label="$t('订单状态')">
        <template #default="scope">
          <el-tag :type="getCurrentOrderStatus(scope.row.status).type">{{
            getCurrentOrderStatus(scope.row.status).name
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="currency"
        :label="$t('币种')"
      >
      </el-table-column>
      <el-table-column
        align="right"
        prop="amount"
        :label="$t('兑换金额')"
      >
          <template #default="scope">
          {{ scope.row.amount }} {{ scope.row.currency }}
          </template>
      </el-table-column>
      <el-table-column
        align="right"
        prop="quantity"
        :label="$t('兑换USDM数量')"
      >
          <template #default="scope">
          {{ scope.row.quantity }} USDM
          </template>
      </el-table-column>
      <el-table-column prop="createtime" :label="$t('兑换时间')" align="center" :formatter="formatterTime" />
    </el-table>
    <div class="flex justify-center mt-5">
      <el-pagination background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-card>
</template>
<script setup>
import { ref, reactive } from "vue";
import { formatterTime } from "@/utils/utils";
import { PayCurrencyApi } from "@/api/account/index";
import { getExchangeOrderRecordsApi } from "@/api/assetDetails/index";
import { Search } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const loading = ref(false);
const orderList = ref([]);
const currencyList = ref([]); //币种
const totalCount = ref(0);

const orderStatus = ref([
  { key: 0, name: t("待处理"), type: "warning" },
  { key: 1, name: t("完成"), type: "success" },
  { key: 2, name: t("失败"), type: "error" },
]);
const getCurrentOrderStatus = (status) => {
  return orderStatus.value.find((item) => item.key === status);
};
// 分页
const pageable = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
});

const getExchangeOrderList = async (addQuery) => {
  try {
    loading.value = true;
    const { page, list } = await getExchangeOrderRecordsApi({
      ...pageable,
      ...addQuery,
    });
//    if (list?.length) {
      orderList.value = list;
      totalCount.value = page.total_count;
//    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
getExchangeOrderList();
// 点击分页
const handleCurrentChange = async (number) => {
  pageable.pageNum = number;
  await getExchangeOrderList();
};
// 条数
const handleSizeChange = number => {
  pageable.pageSize = number;
  getTbaleData();
};
// 获取币种
const getCurrencyData = async () => {
  const res = await PayCurrencyApi();
  if (res.length) {
    currencyList.value = res.map((item) => {
      return { value: item, label: item };
    });
  }
};
//筛选组件
const filterForm = reactive({
  currency: "",
  order_no: "",
  status: "",
});
const filterList = async (e) => {
  const newQuery = Object.entries(filterForm).reduce((acc, [key, value]) => {
    if (value || value >= 0) {
      acc[key] = value;
    }
    return acc;
  }, {});
  pageable.page = 1;
  await getExchangeOrderList(newQuery);
};
// 查询
const onSubmit = () => {
  filterList();
};
Promise.all([getCurrencyData()]);
</script>
<style lang="scss"></style>
